<template>
  <section class="content">
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <span>状态:</span>
          <el-select v-model="code" clearable placeholder="实施前" @change="selectKey" class="myInput">
            <el-option
              v-for="item in codeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
          <!-- <el-input v-model="input" class="input-w-480" placeholder="请输入内容"></el-input> -->
        </el-form-item>
        <el-form-item>
          <!-- <el-button type="primary" v-on:click="search">搜索</el-button> -->
          <el-button type="primary" @click="importDataButton">上传照片</el-button>
          <el-button type="danger" @click="delPic">删除</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    
    <el-checkbox-group
      v-model="checkList"
      style="margin-top: 120px;margin-left:50px;margin-bottom:50px;">
      <span v-for="item in bannerList" :key="item.id">
        <el-checkbox :label="item.id">
          <img :src="item.pic" preview="1" width="250px" height="250px" :title="item.imgName" :alt="item.imgName">
        </el-checkbox>
      </span>
    
    </el-checkbox-group>
    <el-dialog title="上传照片" :visible.sync="importDataDialog" :modal="false">
      <el-form>
      <el-form-item :label-width="formLabelWidth" >
      <el-upload
        class="upload-demo"
        ref="upload"
        drag
        name="files"
        :on-preview="handlePreview"
        :action="upUrl"
        :on-exceed="handleExceed"
        :data="formData"
        :on-success="submitSuccess"
        multiple
        :on-remove="handleRemove"
        :file-list="files"
        :auto-upload="false"
        list-type="picture"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或
          <em>点击上传</em>
        </div>
      </el-upload>
     </el-form-item>
     <el-form-item label="照片名称：" :label-width="formLabelWidth">
          <el-input v-model="imgName" placeholder="不填则为上传的照片名称" class></el-input>
     </el-form-item>
      </el-form>
      <div slot="footer" class>
        <el-button @click="importDataDialog = false">取消</el-button>
        <el-button type="primary" @click="submitUpload">确定</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
export default {
  data() {
    return {
      formLabelWidth:'150px',
      imgName:'',
      id: null,
      projectId:'',
      code: '',
      codeList: [
        {code:"1", name:"实施前"},
        {code:"2", name:"实施中"},
        {code:"3", name:"实施后"}
      ],
      input: null,
      photo: [],
      checkList: [],
      bannerList: [],
      importDataDialog: false,
      upUrl: "/api/pic/insert",
      files: [],
      formData:{
        projectId:this.projectId,
        code:1,
        imgName:''
      }
    };
  },
  methods: {
    search() {},
    selectKey(id) {
      this.id = id;
      this.code = id;
      if (id == null || id =="") {
        this.formData.code = 1
      }else{
        this.formData.code = id
      }
      
      let obj = {};
      obj = this.codeList.find(item => {
        return item.code === id;
        this.id = obj.id;
      });
      this.query(this.projectId,this.formData.code)
    },
    handleExceed(file) {
      console.log(file);
    },
    handlePreview(file) {
        console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //上传文件
    submitUpload() {
      this.formData.imgName=this.imgName;
      this.$refs.upload.submit();
      this.importDataDialog = false;

    },
    importDataButton() {
      this.importDataDialog = true;
    },
    submitSuccess(res,file){
      if(res.status == 200){
        this.$message.success('图片上传成功')
        this.refresh()
        this.$refs.upload.clearFiles()
      }else{
        this.$message.error(res.msg);
      }
    },
    home(){
      if (this.code == null || this.code =="") {  
      let data = {projectId:this.projectId, code:1}
      this.projectModel
        .projectPic(data)
        .then(res => {
          this.bannerList = res.data;        
        })
    }
    },
    query(id,code){
      let data = { projectId: id , code:code};
      this.projectModel
        .projectPic(data)
        .then(res => {
          this.bannerList = res.data; 
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    delPic(){
      if (this.checkList == null || this.checkList.length ===0) {
        this.$message.error("请选择要删除的照片")
      }else{
        this.checkList.forEach(item => {
          this.projectModel.projectPicDel({id:item})
          .then(res =>{
              if (res.status === 200) {
                this.$message.success("删除成功")
                this.refresh()
                this.checkList = []
              }else(err => {
                this.$message.error(res.msg)
              })
          })
        });
      }
    },
    refresh(){
      if (this.code == null || this.code =='') {
          this.code = 1
        }
        this.query(this.projectId,this.code)
    }    
  },
  mounted() {
    this.projectId = this.$route.query.projectId;
    this.formData.projectId = this.$route.query.projectId;
    this.home();
    // this.projectModel
    //   .projectGetAll()
    //   .then(res => {
    //     this.projectList = res.data;
    //   })
    //   .catch(err => {
    //     console.log(err.message);
    //   });
  },
  watch:{
    projectId(newVal,oldVal){
      if (newVal == null || newVal == "") {
        this.home()
      }
    }
  }
};
</script>


<style>
.el-checkbox__label {
  margin-bottom: 20px;
  word-break: break-all;
  white-space: normal;
}
.el-checkbox {
  margin-left: 20px;
}
/* .el-upload-dragger{
  margin-left:130px;
} */
</style>
<style scoped>
.content {
  overflow-y: auto;
  padding-top: 10px;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.el-upload-dragger{
  margin-left:130px;
}
</style>